<template>
  <!-- 右边气泡框 -->
  <div class="popBox">
    <van-dialog
      showCancelButton
      :before-close="beforeCloseDialog"
      v-model="showReport"
    >
      <van-cell title="请选择举报类型"></van-cell>
      <van-radio-group v-model="reportType">
        <van-cell-group>
          <van-cell
            clickable
            v-for="(item, index) in reportOption"
            :key="index"
            :title="item"
          >
            <template #right-icon>
              <van-radio :name="index === 8 ? 0 : index + 1" /> </template
          ></van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-field
        class="remark"
        v-model.trim="remarkMessage"
        rows="1"
        autosize
        label="附加信息(选填):"
        type="textarea"
        placeholder="请输入附加信息"
        maxlength="120"
        show-word-limit
      />
    </van-dialog>
    <van-popover v-model="showPopover" placement="bottom-end" trigger="click">
      <template #reference>
        <i class="iconfont icon-more1"></i>
        <!-- <div class="icon">
          <span></span>
          <span></span>
          <span></span>
        </div> -->
      </template>
      <div class="popContent">
        <div @click="showReportClick">
          <i class="iconfont icon-icon-test111"></i>举报
        </div>
      </div>
    </van-popover>
  </div>
</template>

<script>
export default {
  name: 'PopBox',
  props: {
    reportOption: {
      type: Array,
      default: () => {
        return ['举报类型没有传入']
      }
    }
  },
  data () {
    return {
      // 举报类型
      reportType: -1,
      // 举报附加信息
      remarkMessage: '',
      // 气泡框
      showPopover: false,
      // 举报框
      showReport: false
    }
  },
  methods: {
    // dialog关闭之前
    beforeCloseDialog (action, done) {
      if (action === 'confirm') {
        if (this.reportType === -1) {
          done(false)
          this.$toast('请选择举报类型!')
        } else {
          done()
          this.$emit('reportArticle', {
            target: this.$route.params.id,
            type: this.reportType,
            remark: this.remarkMessage
          })
          this.reportType = -1
          this.remarkMessage = ''
        }
      }
      if (action === 'cancel') {
        done()
        this.reportType = -1
        this.remarkMessage = ''
      }
    },
    // 显示举报窗口
    showReportClick () {
      this.showPopover = false
      this.showReport = true
    }
  },
  watch: {
    // showReport (newValue) {
    //   console.log(1)
    //   if (!newValue) {
    //     this.reportBol = false
    //     this.$nextTick(() => {
    //       this.reportBol = true
    //     })
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
.popBox {
  display: flex;
  margin-left: auto;
  i {
    color: #333;
  }
  // .icon {
  //   position: relative;
  //   display: block;
  //   width: 50px;
  //   height: 20px;
  //   background-color: rgba(0, 0, 0, 0.03);
  //   border-radius: 6px;
  //   span:first-child {
  //     position: absolute;
  //     top: 50%;
  //     left: 25%;
  //     transform: translateY(-50%);
  //     width: 5px;
  //     height: 5px;
  //     border-radius: 100%;
  //     background-color: #333;
  //   }
  //   span:nth-child(2) {
  //     position: absolute;
  //     top: 50%;
  //     left: 45%;
  //     transform: translateY(-50%);
  //     width: 5px;
  //     height: 5px;
  //     border-radius: 100%;
  //     background-color: #333;
  //   }
  //   span:last-child {
  //     position: absolute;
  //     top: 50%;
  //     left: 65%;
  //     transform: translateY(-50%);
  //     width: 5px;
  //     height: 5px;
  //     border-radius: 100%;
  //     background-color: #333;
  //   }
  // }
}
</style>
